<template>
  <div>
    <postDetailHeader :post="post" />
    <!-- poster是海报,视频页面图片   controls是原生mp4视频播放 -->
    <div class="mainContent">
      <video
        class="video"
        controls="controls"
        :poster="post.cover[0].url"
        src="https://video.pearvideo.com/mp4/adshort/20191031/cont-1617802-14542116_adpkg-ad_hd.mp4 "
        v-if="post.type == 2"
      ></video>
      <div class="title">{{post.title}}</div>
      <div class="info" v-if="post.user">{{post.user.nickname}}2019-08-08</div>
      <!-- 这里的 post 有可能是普通文章,也有可能是 视频,
      如果 post.type == 2 那么就是视频-->
      <div class="content" v-html="post.content" v-if="post.type != 2"></div>
      <div class="actionBtns">
        <div class="like" @click="like">
          <span class="iconfont icondianzan" :class="{red:post.has_like}"></span>
          {{post.like_length}}
        </div>
        <div class="wechat">
          <span class="iconfont iconweixin"></span>
          <a
            href="https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Explanation_of_interface_privileges.html"
          >微信</a>
        </div>
      </div>
    </div>
    <div class="comments">
      <h2 class="title">精彩跟帖</h2>
      <div class="emptyComent" v-if="comments.length == 0">暂无跟帖,抢占沙发</div>
      <div class="comment" v-else>
        <comment :commentItem="item" v-for="(item,index) in comments" :key="index" @reply="reply" />
        <div class="btnMoreComments" @click="toMoreComments">更多跟帖</div>
      </div>
    </div>
    <postDetailFooter
      :post="post"
      :isActive="replyActive"
      :replyObj="replyObj"
      @newComment="getComments"
    />
  </div>
</template>

<script>
import postDetailHeader from "../components/postDetailHeader";
import postDetailFooter from "../components/postDetailFooter";
import comment from "../components/comment";

export default {
  components: {
    postDetailHeader,
    postDetailFooter,
    comment
  },
  data() {
    return {
      postId: this.$route.params.id,
      post: {},
      comments: [],
      replyActive: 0,
      replyObj: {}
    };
  },
  methods: {
    reply(replyObj) {
      // 接受了子组件的自定义事件触发,然后我们需要,弹起回复框
      // 点击了回复的那个id
      this.replyObj = replyObj;
      this.replyActive += 1;
    },
    toMoreComments() {
      this.$router.push({
        name: "moreCommentsPage",
        params: {
          id: this.postId
        }
      });
    },
    like() {
      this.$axios({
        url: "/post_like/" + this.post.id,
        method: "get"
      }).then(res => {
        const { message } = res.data;
        //   点赞接口,有两种功能,没有点赞这个就是添加点赞,点过赞了再次触发接口就是取消点赞
        if (message == "点赞成功") {
          this.post.has_like = true;
          this.post.like_length += 1;
        } else if (message == "取消成功") {
          this.post.has_like = false;
          this.post.like_length -= 1;
        }
      });
    },
    getComments() {
      this.$axios({
        url: "/post_comment/" + this.postId,
        method: "get",
        params: {
          pageSize: 3
        }
      }).then(res => {
        const { data } = res.data;
        // 这里 data 就是我们要获取的评论数组,每一个元素都是一条评论, 要先存储到页面组件的 data 当中
        this.comments = data;
      });
    }
  },
  mounted() {
    // 获取动态路径带进来的 id 发送 ajax 请求,获取也二次数据渲染页面
    // 参数 == this.$router.params.id
    console.log(this.postId);
    this.$axios({
      url: "/post/" + this.postId,
      method: "get"
    }).then(res => {
      const { data } = res.data;
      this.post = data;
      console.log(this.post);
    });
    // 获取回复数据
    this.getComments();
  }
};
</script>

<style lang="less" scoped>
.btnMoreComments {
  width: 33.333vw;
  height: 7.778vw;
  line-height: 7.778vw;
  margin: 8.333vw auto 0;
  text-align: center;
  border: 1px solid #f2f2f2;
  border-radius: 4.167vw;
  background-image: linear-gradient(to right, #33ffdd, #33ff33);
}
.red {
  color: red;
}
.mainContent {
  padding: 2.778vw;
}
.title {
  font-size: 5.556vw;
  color: #333;
}
.info {
  margin: 5.556vw;
}
.content {
  /deep/ img {
    max-width: 100%;
  }
}
.video {
  width: 100%;
}
.actionBtns {
  margin: 5.556vw 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .like,
  .wechat {
    width: 16.667vw;
    height: 8.333vw;
    line-height: 8.333vw;
    padding: 0 4.167vw;
    border: 1px solid #333;
    text-align: center;
    border-radius: 4.167vw;
    .iconfont {
      margin-right: 3px;
    }
  }
  .wechat {
    .iconfont {
      color: #00c800;
    }
  }
}
.comments {
  padding-bottom: 22.222vw;
  border-top: 5px solid #e4e4e4;
  .title {
    padding-top: 5.556vw;
    text-align: center;
    font-weight: normal;
  }
  .emptyComent {
    height: 22.222vw;
    line-height: 22.222vw;
    color: #aeaeae;
    text-align: center;
    font-size: 14px;
  }
}
</style>